<template>
  <div class="home">
    <block-loading :loading="blockLoading">
      <van-row type="flex" justify="space-between" class="banner">
        <van-image class="banner_left" :src="require('@/assets/images/bg_banner_left_run.png')"/>
        <van-image class="text_img" :src="require('@/assets/images/bg_banner_text.png')"/>
      </van-row>
      <van-cell-group class="main_panel">
        <h3 class="title"><span><font>幼儿体质提升课程</font></span></h3>
        <van-cell class="select_class_Bar" title="每周各班课程计划" is-link :value="className||'请选择班级'" @click="showPicker=true" ></van-cell>
        <div class="btn_group">
          <van-button
                  size="large"
                  @click="toClass"
                  type="warning"
                  class="class_btn"
                  plain
                  :loading="btnLoading"
          >班级管理</van-button>
          <van-button
                  size="large"
                  @click="getCurriculum"
                  type="primary"
                  class="check_btn"
                  :loading="btnLoading"
                  loading-text="课程获取中..."
          >查看课程</van-button>
        </div>

        <div class="tips">
          <h5> <font class="error">*</font>操作步骤: </h5>
           1、选择要查看体质改善课程的班级。<br/>
           2、点击“查看课程”。<br/>
            3、系统将针对各班最弱项生成16周定制化体质改善系列课。<br/>
            4、点击1-16周各模块,展示对应一周具体课程。<br/>
            5、点击“详情”,查看本节课程详情。
        </div>
      </van-cell-group>
      <van-popup v-model="showPicker" round position="bottom">
      <van-picker
              show-toolbar
              :columns="classList"
              @cancel="showPicker = false"
              value-key="class_name"
              @confirm="onConfirm"
      />
    </van-popup>
    </block-loading>
  </div>
</template>

<script >
// @ is an alias to /src
import $api from "@/api/index";

export default {
  name: "selectClass",
  data() {
    return {
      className:'',
      school_class_id:'',
      classList:[],
      showPicker:false,
      btnLoading:false,
      blockLoading: true,
    };
  },
  mounted(){
    this.$store.dispatch("user/checkRole", '2').then(res=>{
      this.getClassList()
    })
  },
  methods: {
    // 选择班级
    onConfirm(value) {
      this.className = value.class_name;
      this.school_class_id=value.school_class_id
      this.showPicker = false;
    },
    // 获取班级列表
    async getClassList(){
      const res= await $api.school.getClassList()
      if(res.data.length===0){
        this.$router.push({path:'/class_manage'})
        return false
      }
      this.classList = res.data
      this.blockLoading = false
    },
    // 获取班级课程
    getCurriculum(){
      let school_class_id =this.school_class_id
      if( !school_class_id){
        this.$toast('请选择班级');
        return false
      }
      this.$router.push({path:'/select_course',query:{school_class_id}})
    },
    // 班级管理
    toClass(){
      this.$router.push('/class_manage')
    }
  },
};
</script>
<style lang="scss" scoped>
 ::v-deep{
   .banner .banner_left{
     width: 287px;
     height: 280px;
     margin-top: -10px;
   }
   .main_panel{
     padding: 40px 10px;
     .title{
       text-align: center;
       font-size: 32px;
       font-weight: bold;
       margin: 0;
       color: #292929;
       span{
         position: relative;
         padding: 0 10px;
         font{
           z-index: 2;
           position: relative;
         }
         &:after{
           content: '';
           position: absolute;
           bottom:2px;
           left: 0;
           width: 100%;
           height: 6px;
           background: #FF804E;
           border-radius: 3px;
           z-index: 1;
         }
       }
     }
   }
   .select_class_Bar{
     margin-top: 30px;
     padding-left: 10px;
     padding-right: 10px;
     font-size: 30px;
     &:after{
       left: 0;
     }
   }
   .btn_group{
     display: flex;
      .van-button{
        width: 240px;
        height: 74px;
        margin:80px auto 40px;
        display: block;
        font-size: 28px;
        border-radius: 10px;
      }
     .check_btn{
       background: linear-gradient(180deg, #64CF86 1%, #15B165 98%);
     }
   }

   .tips{
     font-size: 24px;
     color: #515151;
     line-height: 43px;
     padding:15px;
     h5{
       font-size: 26px;
       margin: auto;
       font-weight: normal;
     }
   }
 }
</style>
